<template>
    <div id="leftBtm">
        <div class="heightChart">
            <div class="title">报修工单</div>
            <div id="main1"></div>
        </div>

    </div>
</template>

<script>
    import echarts from 'echarts'
    import {getDeptRepairsCount} from "../../../network/home";
    export default {
        name: "leftBtm",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('左下角关闭')
            }
        },
        methods: {
            setEchart() {
                getDeptRepairsCount().then(res => {
                    if (res.code == '200') {
                        var sumDatas = []
                        var indexList = []
                        var nameDatas = []
                        // console.log(res.data)
                        for(var i=0;i<res.data.dataList.length;i++){
                            // 取出有值的数据
                            if(res.data.dataList[i]!==0){
                                sumDatas.push(res.data.dataList[i])
                            }
                            // 取出有值的数据的索引集合
                            if(res.data.dataList[i]!==0){
                                // console.log(i)
                                indexList.push(i)
                            }
                        }

                        // 循环取出有值索引对应的名称
                        for(var n=0;n<indexList.length;n++){
                            for(var tmp in res.data.name){
                                if(indexList[n] == tmp){
                                    // console.log(res.data.name[tmp])
                                    nameDatas.push(res.data.name[tmp])
                                }
                            }
                        }

                        let myChart = echarts.init(document.getElementById("main1"));

                        myChart.setOption({
                            grid: {
                                top: '15%',
                                right: '3%',
                                left: '8%',
                                bottom: '12%'
                            },
                            xAxis: [{
                                show:false,
                                type: 'category',
                                // data:res.data.name,
                                data:nameDatas,
                                axisLabel: {
                                    margin: 20,
                                    color: '#ffffff',
                                    textStyle: {
                                        fontSize: 12
                                    },
                                },
                            }],
                            yAxis: [{
                                axisLabel: {
                                    color: '#ffffff',
                                },
                                axisLine: {
                                    show: false
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: '#272456'
                                    }
                                }
                            }],
                            tooltip:{
                                show: true,
                                trigger: 'item'
                            },
                            series: [{
                                type: 'bar',
                                data: sumDatas, //####################
                                barWidth: '13px',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true, //开启显示
                                            position: 'top', //在上方显示
                                            textStyle: { //数值样式
                                                color: 'white',
                                                fontSize: 12
                                            },
                                        },
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: '#CBED0D' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#0FC40A' // 100% 处的颜色
                                        }], false),
                                        shadowBlur: 4,
                                    }
                                },

                            }]
                        });
                    }
                });

            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 500px;
        height: 380px;
        background: url("../../../assets/img/worksource/a1.png");
        background-size: 500px 380px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 22px;
        color: #0FC40A;
    }

    #main1 {
        width: 90%;
        height: 380px;
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

</style>
